<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/libs/css/bootstrap.min.css">
</head>
<style>
    table tr {
        text-align: center;
    }
</style>

<body>
    <input class="form-control" style="width:200px;display:inline;" placeholder="请输入搜索的婚纱名" id="keyword">
    <button class="btn btn-primary" onclick="search()">搜索</button>
    <button class="btn btn-secondary" onclick="submit()">添加婚纱</button>
    <table class="table table-hover ">
        <thead>
            <tr class="table-active">
                <th>婚纱编号</th>
                <th>婚纱名</th>
                <th>婚纱图片</th>
                <th>婚纱介绍</th>
                <th>婚纱主题</th>
                <th>婚纱价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbodyContent">
            @foreach($data as $weddingdress)
            @csrf
            <tr>
                <td>{{ $weddingdress->dressid }}</td>
                <td>{{ $weddingdress->dressname }}</td>
                <td><img src="/storage/images/{{ $weddingdress->dressphoto }}" style="width:40px;height:40px "> </td>
                <td>{{ $weddingdress->dressintroduce }}</td>
                <td>{{ $weddingdress->dresstheme }}</td>
                <td>{{ $weddingdress->dressprice }}</td>
                <td><button onclick="update('{{$weddingdress->dressid}}')" class="btn btn-warning">修改</button><button class="btn btn-danger" onclick="remove('{{$weddingdress->dressid}}')" style="margin-left:5px;">删除</button></td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-title"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="form-info" enctype="multipart/form-data" action="/wedding/add" method="post">
                        @csrf
                        <div class="mb-3">
                            <input type="hidden" class="form-control" id="dressid" placeholder="婚纱编号" name="dressid">
                        </div>
                        <div class="mb-3">
                            <input type="file" class="form-control" id="dressimage" placeholder="婚纱图片" name="dressimage">
                        </div>
                        <div class="mb-3 mt-3">
                            <select class="form-select" id="dresstype" placeholder="婚纱类别" name="dresstype">
                                @foreach($WeddingDressType as $type)
                                <option value="{{$type->typeid}}">{{$type->typename}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3 mt-3">
                            <select class="form-select" id="dresstheme" placeholder="婚纱主题" name="dresstheme">
                                <option value="浪漫">浪漫</option>
                                <option value="喜庆">喜庆</option>
                                <option value="高贵">高贵</option>
                                <option value="优雅">优雅</option>
                                <option value="纯洁">纯洁</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="dressname" placeholder="婚纱名" name="dressname">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="dressintroduce" placeholder="婚纱介绍" name="dressintroduce">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="dressprice" placeholder="婚纱价格" name="dressprice">
                        </div>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                        <button type="button" id="save" class="btn btn-primary" onclick="saveSubmit()">保存</button>
                        <button type="submit" id="add" class="btn btn-primary">添加</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="/libs/jquery-3.6.0.js"></script>
    <script src="/libs/js/bootstrap.js"></script>
    <script>
        // 定义图片全局变量
        let file = '';

        function update(dressid) {
            $('#myModal').modal('show');
            $('#modal-title').text('修改婚纱信息');
            $('#dressimage').hide()
            $('#add').hide()
            $('#save').show()
            $.ajax({
                type: 'post',
                url: '/wedding/update',
                data: {
                    'dressid': dressid,
                    '_token': $('input[name=_token]').val()
                },
                dataType: 'json',
                success: function(res) {
                    $('#dresstheme').val(res[0].dresstheme);
                    $('#dressname').val(res[0].dressname);
                    $('#dressid').val(res[0].dressid);
                    $('#dressintroduce').val(res[0].dressintroduce);
                    $('#dressprice').val(res[0].dressprice);
                }
            })
        }

        function saveSubmit() {
            let data = {
                'dresstheme': $('#dresstheme').val(),
                'dressname': $('#dressname').val(),
                'dressid': $('#dressid').val(),
                'dressintroduce': $('#dressintroduce').val(),
                'dressprice': $('#dressprice').val(),
                '_token': $('input[name=_token]').val()
            }
            $.ajax({
                type: 'post',
                url: '/wedding/save',
                data: data,
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                    if (res[0].code == 200) {
                        location.reload();
                    } else {
                        alert('修改失败');
                    }
                }
            })
        }

        function remove(dressid) {
            $.ajax({
                type: 'post',
                url: '/wedding/remove',
                data: {
                    'dressid': dressid,
                    '_token': $('input[name=_token]').val()
                },
                dataType: 'json',
                success: function(res) {
                    if (res[0].code == 200) {
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                }
            })
        }

        function submit() {
            $('#myModal').modal('show');
            $('#modal-title').text('添加婚纱信息');
            $('#save').hide()
            $('#add').show()
            $('#dressimage').show()
            $('#dressname').val(''),
                $('#dressid').val(''),
                $('#dressintroduce ').val(''),
                $('#dressprice').val('')
        }

        function search() {
            let keyword = $('#keyword').val();
            $.ajax({
                type: 'post',
                url: '/wedding/search',
                data: {
                    'keyword': keyword,
                    '_token': $('input[name=_token]').val()
                },
                success: function(res) {
                    $('#tbodyContent').html('')
                    res.forEach(item => {
                        $('#tbodyContent').append(`
                            <tr>
                                <td>${item.dressid}</td>
                                <td>${item.dressname}</td>
                                <td><img src="/storage/images/${item.dressphoto}" style="width:40px;height:40px "> </td>
                                <td>${item.dressintroduce}</td>
                                <td>${item.dresstheme}</td>
                                <td>${item.dressprice}</td>
                                <td><button onclick="update(${item.dressid})" class="btn btn-warning">修改</button>
                                <button class="btn btn-danger" onclick="remove(${item.dressid})" style="margin-left:5px;">删除</button></td>
                            </tr>
                        `)
                    });
                }
            })
        }
    </script>
</body>

</html>